<template>
  <!-- header -->
  <div class="nav-container page-component">
    <!--左侧导航 #start -->
    <div class="nav left-nav">
      <div class="nav-item">
        <span class="v-link clickable dark" onclick="javascript:window.location='/user'">实名认证</span>
      </div>
      <div class="nav-item selected">
        <span class="v-link selected dark" onclick="javascript:window.location='/order'">挂号订单</span>
      </div>
      <div class="nav-item">
        <span class="v-link clickable dark" onclick="javascript:window.location='/patient'">就诊人管理</span>
      </div>
      <div class="nav-item"><span class="v-link clickable dark">修改账号信息</span></div>
      <div class="nav-item"><span class="v-link clickable dark">意见反馈</span></div>
    </div>
    <!-- 左侧导航 #end -->
    <!-- 右侧内容 #start -->
    <div class="page-container">
      <div class="order-detail">
        <div class="title"> 挂号详情</div>
        <div class="status-bar">
          <div class="left-wrapper">
            <div class="status-wrapper BOOKING_SUCCESS">
              <span class="iconfont"></span> {{ orderInfo.param.orderStatusString }}
            </div>
          </div>
          <div class="right-wrapper">
            <img src="//img.114yygh.com/static/web/code_order_detail.png" class="code-img">
            <div class="content-wrapper">
              <div> 微信<span class="iconfont"></span>关注“北京114预约挂号”</div>
              <div class="watch-wrapper"> 快速挂号，轻松就医</div>
            </div>
          </div>
        </div>
        <div class="info-wrapper">
          <div class="title-wrapper"><span class="block"></span><span>挂号信息</span></div>
          <div class="info-form">
            <el-form ref="form" :model="form">
              <el-form-item label="就诊人信息："><span class="content">{{ orderInfo.patientName }}</span></el-form-item>
              <el-form-item label="就诊日期：">
                <span class="content">{{ orderInfo.reserveDate }} {{ orderInfo.reserveTime == 0 ? '上午' : '下午' }}</span>
              </el-form-item>
              <el-form-item label="就诊医院："><span class="content">{{ orderInfo.hosname }}</span></el-form-item>
              <el-form-item label="就诊科室："><span class="content">{{ orderInfo.depname }}</span></el-form-item>
              <el-form-item label="医生职称："><span class="content">{{ orderInfo.title }}</span></el-form-item>
              <el-form-item label="医事服务费："><span class="content fee">{{ orderInfo.amount }}元</span></el-form-item>
              <el-form-item label="挂号单号："><span class="content">{{ orderInfo.outTradeNo }}</span></el-form-item>
              <el-form-item label="挂号时间："><span class="content">{{ orderInfo.createTime }}</span></el-form-item>
            </el-form>
          </div>
        </div>
        <div class="rule-wrapper mt40">
          <div class="rule-title"> 注意事项</div>
          <div>1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br>
            <span style="color:red">2、【取号】就诊当天需在{{ orderInfo.fetchTime }}在医院取号，未取号视为爽约，该号不退不换；</span><br>
            3、【退号】在{{ orderInfo.quitTime }}前可在线退号 ，逾期将不可办理退号退费；<br>
            4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
            5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
          </div>
        </div>
        <div class="bottom-wrapper mt60" v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1">
          <div class="button-wrapper">
            <div class="v-button white" @click="cancelOrder()">取消预约</div>
          </div>
          <div class="button-wrapper ml20" v-if="orderInfo.orderStatus == 0">
            <div class="v-button" @click="pay()">支付</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧内容 #end -->
    <!-- 微信支付弹出框 -->
    <el-dialog :visible.sync="dialogPayVisible" style="text-align: left" :append-to-body="true" width="500px"
               @close="closeDialog">
      <div class="container">
        <div class="operate-view" style="height: 350px;">
          <div class="wrapper wechat">
            <qriously :value="payObj.codeUrl" :size="220"></qriously>
            <span style="text-align: center;line-height: 25px;margin-bottom: 40px;">
              请使用微信扫一扫<br/>扫描二维码支付
            </span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <!-- footer -->
</template>
<script>
import '~/assets/css/hospital_personal.css'
import '~/assets/css/hospital.css'
import { getOrders } from '@/api/order/orderInfo'
import { cancelOrder, createNative, queryPayStatus } from '@/api/order/weixin'

export default {
  data() {
    return {
      orderId: null,
      orderInfo: {
        param: {}
      },
      // 微信支付
      dialogPayVisible: false,
      payObj: {},
      timer: null  // 定时器，用于定时查询支付状态
    }
  },
  created() {
    this.orderId = this.$route.query.orderId
    this.init()
  },
  methods: {
    init() {
      getOrders(this.orderId).then(res => {
        this.orderInfo = res.data
      })
    },
    pay() { // 打开微信支付
      this.dialogPayVisible = true
      createNative(this.orderId).then(res => {
        this.payObj = res.data
        if (this.payObj.codeUrl == '') {
          this.dialogPayVisible = false
          this.$message.error('支付错误')
        } else {
          this.timer = setInterval(() => {
            this.queryPayStatus(this.orderId)
          }, 3000)
        }
      })
    },
    queryPayStatus(orderId) { // 定时轮询查支付状态
      queryPayStatus(orderId).then(res => {
        if (res.message === '支付中') return
        clearInterval(this.timer);
        window.location.reload()
      })
    },
    closeDialog() {
      clearInterval(this.timer)
    },
    cancelOrder() {
      this.$confirm('确定取消预约吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // promise
        return cancelOrder(this.orderId)
      }).then((res) => {
        this.$message.success('取消成功')
        this.init()
      }).catch(() => {
        this.$message.info('已取消取消预约')
      })
    }
  }
}
</script>
<style>
.info-wrapper {
  padding-left: 0;
  padding-top: 0;
}

.content-wrapper {
  color: #333;
  font-size: 14px;
  padding-bottom: 0;
}

.bottom-wrapper {
  width: 100%;
}

.button-wrapper {
  margin: 0;
}

.bottom-wrapper .button-wrapper {
  margin-top: 0;
}
</style>
